<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>16.宏任务、微任务</title>
</head>

<body>
  <!-- 宏任务、微任务 -->
  1.宏任务：setTimeout, setInterval, Ajax, DOM事件
  2.微任务：Promoise async/await
  记住：微任务执行时机比宏任务要早

  <!-- 宏任务和微任务两者区别 -->
  宏任务：DOM渲染后触发，setTimeout
  微任务：DOM渲染前触发，如Promise

  <!-- 从EventLoop解释为什么微任务比宏任务执行更早？ -->
  1.Call Stack 清空
  2.执行当前micro task queue（ES6语法规定的）微任务
  3.尝试DOM渲染
  4.触发EventLoop（宏任务是浏览器决定的）

  <!-- 面试题 -->
  1.宏任务有哪些？微任务有哪些？微任务为什么触发时机更早？
  2.微任务，宏任务和DOM渲染的关系
  3.微任务，宏任务和DOM渲染，在event loop的过程





  <script>
    console.log(100); // 1
    setTimeout(() => {
      console.log(200); // 4
    })
    Promise.resolve().then(() => {
      console.log(300); // 3
    })
    console.log(400); // 2

  </script>

</body>

</html>